<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>抱团商家</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="抱团">
    <meta name="description" content="抱团">
    <script type="text/javascript" src="../common/js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="../common/css/elementui.min.css">
    <link rel="stylesheet" type="text/css" href="../common/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../common/css/nanoscroller.css">
    <link rel="stylesheet" type="text/css" href="../common/css/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="../common/css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="../common/js/jquery.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/jquery.easing.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/html2canvas.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/vue-resource.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/elementui.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/jquery.nanoscroller.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/swiper.animate.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/swiper-bundle.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js?1=1" charset="UTF-8"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" charset="UTF-8"></script>
</head>
<body>
<div class="wrapperbox" id="app">
    <div class="hexiaopage2" v-if="finished">
        <div class="tittle">电子码核销</div>
        <div class="message">
            <div class="tipbox">
                <img class="false" src="images/correct.png">
                <p class="tip">核销成功，还可以继续核销</p>
            </div>
            <div class="button" style="margin-right: 0.4rem" @click="consumeScan">
                <img class="scan" src="images/scan.png">
                <span class="btn">扫一扫核销</span>
            </div>
            <div class="button" @click="consumeInput">
                <img class="scan" src="images/barcode.png">
                <span class="btn">电子码核销</span>
            </div>
            <a class="indexbtn" href="./index.html">返回首页</a>
        </div>
    </div>
    <div class="hexiaopage" v-else>
        <div class="tittle">电子码核销</div>
        <div class="message">
            <p class="tip">您核销的电子码为</p>
            <div class="cardname">
                <input type="text" v-model="code">
            </div>
            <div class="msg">{{error}}</div>
            <div class="button" @click="submit">提交</div>
        </div>
    </div>
</div>
</body>
<script>
  $(function () {
    new Vue({
      el: '#app',
      data() {
        return {
          finished: false,
          code: getUrlParam('code') || '',
          error: '',
        }
      },
      mounted() {
        this.init()
      },
      methods: {
        init: function () {
          common_get('jssdk_params?url=' + encodeURIComponent(window.location.href)).then(res => {
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: res.appId, // 必填，公众号的唯一标识
              timestamp: res.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.nonceStr, // 必填，生成签名的随机串
              signature: res.signature,// 必填，签名
              jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
            });
          })
        },
        submit: function () {
          this.error = ''
          if (!this.code === '') {
            this.error = '请输入核销码'
            return
          }
          merchant_post('consume/' + this.code, {}).then(res => {
            this.finished = true
          })
        },
        consumeInput: function () {
          this.code = ''
          this.finished = false
        },
        consumeScan: function () {
          this.code = ''
          this.finished = false
          let that = this
          wx.ready(function () {
            wx.scanQRCode({
              needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
              success: function (res) {
                that.code = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              }
            });
          })
        },
      }
    });
  })
</script>
</html>
